import {Fragment, useState} from "react";

const RenderList = ()=>{
    const data = [
        {
            "id": 0,
            "name": "凯瑟琳·约翰逊",
            "profession": "数学家",
            "accomplishment": "太空飞行相关数值的核算",
            "imageId": "MK3eW3A"
        },
        {
            "id": 1,
            "name": "马里奥·莫利纳",
            "profession": "化学家",
            "accomplishment": "北极臭氧空洞的发现",
            "imageId": "mynHUSa"
        },
        {
            "id": 2,
            "name": "穆罕默德·阿卜杜勒·萨拉姆",
            "profession": "物理学家",
            "accomplishment": "关于基本粒子间弱相互作用和电磁相互作用的统一理论",
            "imageId": "bE7W1ji"
        },
        {
            "id": 3,
            "name": "珀西·莱温·朱利亚",
            "profession": "化学家",
            "accomplishment": "开创性的可的松药物、类固醇和避孕药的研究",
            "imageId": "IOjWm71"
        },
        {
            "id": 4,
            "name": "苏布拉马尼扬·钱德拉塞卡",
            "profession": "天体物理学家",
            "accomplishment": "白矮星质量计算",
            "imageId": "lrWQx8l"
        }
    ];

    const [people,setPeople] = useState(data);
    const [select,setSelect] = useState('');

    const lis = people.filter(item=>!select || item.profession === select);
    const professions = new Set();
    data.forEach(item=>professions.add(item.profession));
    const options = Array.from(professions).map((item,index)=><option defaultValue={!index} key={item}>{item}</option>);
    const selectChange = (e)=>{
        const filterKey =  e.target.value
        const peoples = data.filter(item=>item.profession === filterKey);
        setSelect(filterKey);
        setPeople(peoples);
    }

    return (
        <Fragment>
            <select onChange={selectChange}>{options}</select>
            <ul>
                {lis.map(item=>(
                    <li key={item.id}>
                        <b>{item.name}</b>
                        {' ' + item.profession + ' '}
                        因{item.accomplishment}而闻名世界
                    </li>
                ))}
            </ul>
        </Fragment>
    )
}

export default RenderList